<template>
    <div>
        搜索提示
        <ol>
            <li v-for="s in sugguestList">{{s.keyword}}</li>
        </ol>
    </div>
</template>
<!-- 
    http://47.115.51.185:8081/search/suggest?keywords=陈奕迅&type=mobile
 -->
<script>
    export default {
        props:{
            keywords:{
                type:String,
                default:""
            }
        },
        data(){
            return {
                sugguestList:[]
            }
        },
        created(){
            console.log("搜索提示组件  created===>")
        },
        watch:{
            keywords:{
                handler(newValue){//侦听keywords的处理函数
                        fetch(`http://47.115.51.185:8081/search/suggest?keywords=${newValue}&type=mobile`)
                        .then(response=>response.json())
                        .then(re=>{
                            this.sugguestList=re.result.allMatch;
                            console.log(re);
                        })
                },
                immediate:true,//立即执行 第一次就执行 不用等变化之后在执行
            }
            // keywords(newValue){
            //     fetch(`http://47.115.51.185:8081/search/suggest?keywords=${newValue}&type=mobile`)
            //     .then(response=>response.json())
            //     .then(re=>{
            //         console.log(re);
            //     })
            // }
        }
    }
</script>

<style lang="scss" scoped>

</style>